<template>
  <div>
    <div style="margin: 20px 30px">
      <el-page-header @back="goBack" :content="title+'模块列表'"></el-page-header>
    </div>
    <div class="interval" id="list">
      <div style="display:flex;align-items: center;margin-top: 30px">
        <el-input v-model="searchInfo.moduleName" placeholder="模块名称" style="width: 200px ;margin-right: 20px" clearable></el-input>
        <el-button type="primary" @click="search()">搜索</el-button>
        <router-link :to="'/base/moduleAdd/?projectId='+this.projectId">
          <el-button type="primary" style="margin-left: 20px">新增模块</el-button>
        </router-link>
      </div>
      <el-table border :data="tableData" style="margin-top: 30px" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
        <!--        <el-table-column label="序号" prop="pk"></el-table-column>-->
        <el-table-column label="模块名称">
          <template slot-scope="scope">
            <router-link :to="'/base/caseList/?moduleId='+scope.row.pk">{{scope.row.fields.module_name}}</router-link>
          </template>
        </el-table-column>
        <el-table-column label="测试人员" prop="fields.test_user"></el-table-column>
        <el-table-column label="所属项目">
          <template slot-scope="scope">
            <span v-for="item in projectInfo" v-if="item.pk===scope.row.fields.belong_project" v-text="item.fields.project_name"></span>
          </template>
        </el-table-column>
        <el-table-column label="用例数量" prop="pk" :formatter="caseRowNum"></el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">{{scope.row.fields.create_time | timeFormat}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--            <el-button @click.native.prevent="runRow(scope.$index, tableData)" type="text" size="small">运行</el-button>-->
            <el-button @click.native.prevent="editRow(scope.$index, tableData)" type="text" size="small">编辑</el-button>
            <el-button @click.native.prevent="deleteRow(scope.$index,tableData)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--编辑模型-->
      <el-dialog :title="dialog_title" :visible.sync="dialogFormVisible" width="650px">
        <el-form :model="moduleFields" inline label-width="80px" style="width: 600px" label-position="right">
          <el-form-item label="模块名称:">
            <el-input style="width: 400px" v-model="moduleFields.fields.module_name"></el-input>
          </el-form-item>
          <el-form-item label="所属项目:">
            <el-select style="width: 400px" v-model="moduleFields.fields.belong_project" filterable placeholder="请选择项目">
              <el-option v-for="item in projectInfo" :key="item.pk" :label="item.fields.project_name" :value="item.pk"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="测试人员:">
            <el-input style="width: 400px" v-model="moduleFields.fields.test_user"></el-input>
          </el-form-item>
          <el-form-item label="简要描述:">
            <el-input type="textarea" :rows="2" style="width: 400px" v-model="moduleFields.fields.simple_desc"></el-input>
          </el-form-item>
          <el-form-item label="其他信息:">
            <el-input type="textarea" :rows="2" style="width: 400px" v-model="moduleFields.fields.other_desc"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible=false">取消</el-button>
          <el-button @click="moduleEdit()">确定</el-button>
        </div>
      </el-dialog>
    </div>
    <!--分页-->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchInfo.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="searchInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
    name: "moduleList",
    data() {
        return {
            projectId: '', //页面初始时，url中传递过来的projectId
            tableData: [],
            title: '',
            projectInfo: [],
            dialog_title: "编辑模块",
            dialogFormVisible: false,
            belong_project_old: '', //模块初始时属于的项目
            moduleFields: {
                id: "",
                fields: {
                    module_name: "",  //模块名
                    test_user: "",  // 测试人员
                    belong_project: "", // 所属项目
                    simple_desc: "",  // 简要描述
                    other_desc: "",  // 其他描述
                }
            },
            total: 1, //模块总数,1为一个没有意义的数，起占位作用
            searchInfo: {
                projectId: '',
                moduleName: '',
                pageSize: 10,
                currentPage: 1
            },
        }
    },
    filters: {
        timeFormat: function (data) {
            return moment(data).format("YYYY-MM-DD")
        }
    },
    methods: {
        getModuleInfo() {
            //获取模块信息
            this.projectId = this.$route.query.projectId;
            this.$axios.get('/api/moduleList/', {params: {'projectId': this.projectId}})
                .then(res => {
                    this.tableData = res.data.moduleList;
                    this.total = res.data.moduleNum;
                    console.log('获取模块：');
                    console.log(this.tableData)
                })
        },
        getProjectInfo() {
            //获取项目信息
            this.$axios.get("/api/projectList/")
                .then(res => {
                    console.log('获取项目：');
                    console.log(res.data.projectList);
                    this.projectInfo = res.data.projectList;
                })
        },
        editRow(index, rows) {
            // 打开编辑弹框
            let moduleInfo = rows[index];
            console.log(moduleInfo);
            this.moduleFields.id = moduleInfo.pk;
            this.moduleFields.fields = moduleInfo.fields;
            // 保存当前模块的初始项目id
            this.belong_project_old = this.moduleFields.fields.belong_project;
            console.log(this.moduleFields);
            this.dialogFormVisible = true;
        },
        moduleEdit() {
            //编辑模块
            this.$axios.put('api/moduleEdit/', {'moduleFields': this.moduleFields, 'projectOriginId': this.belong_project_old})
                .then(res => {
                    if (res.data.msgCode === '1') {
                        console.log("编辑模块成功");
                        this.getModuleInfo();
                        this.dialogFormVisible = false;
                    }
                })
                .catch(error => {
                    console.log("编辑模块失败:");
                    console.log(error);
                })
        },
        deleteRow(index, rows) {
            //删除单行数据
            let moduleInfo = rows[index];
            console.log(moduleInfo);
            this.$axios.delete("api/moduleDel/", {data: {"moduleInfo": moduleInfo}})
                .then(res => {
                    console.log(res);
                    if (res.data.msgCode === "1") {
                        console.log("删除数据成功");
                        this.getModuleInfo();
                    } else {
                        console.log("删除数据失败");
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        },
        // 查询模块
        search() {
            this.searchInfo.projectId = this.projectId;
            this.$axios.get('/api/searchModule/', {params: {'searchInfo': this.searchInfo}})
                .then(res => {
                    if (res.data.msgCode === "1") {
                        console.log("查询数据成功");
                        this.tableData = res.data.moduleList;
                        this.total = res.data.moduleNum;
                        this.searchInfo.currentPage = res.data.currentPage //保持前后端页码一致
                    } else {
                        console.log("查询数据失败");
                    }
                })
        },
        handleSizeChange(val) {
            console.log(`每页显示 ${val} 条数据`);
            this.searchInfo.pageSize = val;
            this.searchInfo.projectId = this.projectId;
            this.$axios.get('/api/searchModule/', {params: {'searchInfo': this.searchInfo}})
                .then(res => {
                    if (res.data.msgCode === "1") {
                        console.log("查询数据成功");
                        this.tableData = res.data.moduleList;
                        this.total = res.data.moduleNum;

                    } else {
                        console.log("查询数据失败");
                    }
                })

        },
        handleCurrentChange(val) {
            console.log(`当前页码为:${val}`);
            this.searchInfo.currentPage = val;
            this.searchInfo.projectId = this.projectId;
            this.$axios.get('/api/searchModule/', {params: {'searchInfo': this.searchInfo}})
                .then(res => {
                    if (res.data.msgCode === "1") {
                        console.log("查询数据成功");
                        this.tableData = res.data.moduleList;
                        this.total = res.data.moduleNum;

                    } else {
                        console.log("查询数据失败");
                    }
                })
        },
        //获取用例的数量
        caseRowNum(row, column, cellValue, index) {
            let num;
            $.ajax({
                url: `${this.$BASEURL}/api/getCaseNum/`,
                type: "GET",
                dataType: "json",   //返回格式为json
                async: false,
                data: {'moduleId': cellValue},
                success: function (res) {
                    console.log(res);
                    num = res.caseNum
                }
            });
            return num
        },
        // 页面返回
        goBack() {
            console.log('go back');
            this.$router.back();
        },
    },
    created() {
        // 初始化页面数据
        this.getProjectInfo();
        this.getModuleInfo();
    }
}
</script>

<style scoped>
  .interval {
    margin: 10px auto;
  }

  #list {
    margin: 10px 30px;
  }
</style>
